<template>
	<div class="chooser-component">
		<ul>
			<li v-if="item.sxzh_name"
          class="chooser-item"
          v-for="(item, index) in selections"
					:title="item.sxzh_name" @click="chosenSelection(index)"
					:class="{ active: nowIndex === index }">
				<div>
					{{ item.sxzh_name }}
				</div>
			</li>
			<li v-if="item.yjsx_name"
          class="chooser-item"
          v-for="(item, index) in selections"
				  :title="item.yjsx_name" @click="chosenSelection(index)"
				  :class="{ active: nowIndex === index }">
				<div>
					{{ item.yjsx_name }}
				</div>
			</li>
			<li v-if="item.label"
          class="chooser-item"
          v-for="(item, index) in selections"
				  :title="item.label" @click="chosenSelection(index)"
				  :class="{ active: nowIndex === index }">
				<div>
					{{item.label}}
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  name: 'VChooser',
  props: {
    selections: {
      type: [Array, String],
      default: 'none'
    },
    stages: {
      type: [Number, String],
      default: 3
    },
    isReset: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      nowIndex: 0,
      installmentNowIndex: null,
      index: 0
    }
  },
  methods: {
    chosenSelection (index) {
      this.nowIndex = index
      this.installmentNowIndex = index
      this.$emit('on-change', this.selections[this.nowIndex])
      this.$emit('changes')
    }
  },
  watch: {
    isReset (newval, oldval) {
      if (newval !== oldval) this.nowIndex = 0
    },
    stages (val) {
      if (val === 3 || val === '3') {
        this.nowIndex = 0
      } else if (val === 6 || val === '6') {
        this.nowIndex = 1
      } else if (val === 9 || val === '9') {
        this.nowIndex = 2
      } else if (val === 12 || val === '12') {
        this.nowIndex = 3
      }
    }
  },
  mounted () {
    let val = this.stages
    if (val === 3 || val === '3') {
      this.nowIndex = 0
    } else if (val === 6 || val === '6') {
      this.nowIndex = 1
    } else if (val === 9 || val === '9') {
      this.nowIndex = 2
    } else if (val === 12 || val === '12') {
      this.nowIndex = 3
    }
  }
}
</script>

<style scoped>
.chooser-component ul {
	overflow: hidden;
}

.chooser-component li {
	float: left;
}

.chooser-item {
	height: 36px;
	border: 1px solid #ccc;
	margin-right: 12px;
	font-size: 14px;
	color: #333;
	padding: 0 13px;
	cursor: pointer;
	border-radius: 2px;
  margin-bottom: 10px;
}
.chooser-item.active {
  border: 1px solid #FF600A;
  background: url(../../assets/images/icon_check.png) no-repeat top right;
}
.chooser-item:hover {
	border: 1px solid #FF600A;
}

.chooser-item-forbid {
	height: 36px;
	border: 1px solid #ccc;
	margin-right: 12px;
	font-size: 14px;
	color: #333;
	padding: 0 13px;
	cursor: pointer;
	border-radius: 2px;
  margin-bottom: 10px;
}

.active-forbid {
	border: 1px solid #ccc !important;
	background: url(../../assets/images/icon_check_forbid.png) no-repeat top right !important;
}
</style>
